/**
 * 组件名称：IpdShellTabs
 * 使用场景：Ipd左右布局中，右侧也应该有对应的布局
 * 功能介绍：标题、英文、导航按钮
 * 功能进度：100%
 * 待办事项：有个疑问是为什么这里不用"use client"，而引用这个组件的地方需要使用"use client"
 */

import {Title, Text} from "@mantine/core";
import classes from "./IpdShellTools.module.css";

import Link from "next/link";
import {useSelectedLayoutSegment} from "next/navigation";
import {Button} from "@mantine/core";

interface NavProps {
  label: string;
  link: string;
  icon: React.FC<any>;
}

interface SubHeaderProps {
  zh: string;
  en: string;
  base: string;
  nav: NavProps[];
}

const IpdShellNav = ({base, nav}: {base: string; nav: NavProps}) => {
  const segment = useSelectedLayoutSegment();
  const isActive = nav.link === segment;

  return (
    <Button
      component={Link}
      href={`${base}/${nav.link}`}
      variant={isActive ? "outline" : "default"}
      size="xs"
      leftSection={<nav.icon size={14} />}
    >
      {nav.label}
    </Button>
  );
};

export const IpdShellTools = ({
  subHeader,
  children,
}: {
  subHeader: SubHeaderProps;
  children: React.ReactNode;
}) => {
  return (
    <>
      <div className={classes.header}>
        <Title order={1}>{subHeader.zh}</Title>
        <Text size="lg" c="dimmed">
          {subHeader.en}
        </Text>
        <div className={classes.menu}>
          {subHeader.nav.map((item) => (
            <IpdShellNav key={item.link} base={subHeader.base} nav={item} />
          ))}
        </div>
      </div>
      <div className={classes.children}>{children}</div>
    </>
  );
};
